<template>
  <div class="form_container">
    <div class="manage_tip">
      
      <el-form
        :model="loginUser"
        status-icon
        :rules="rules"
        ref="loginForm"
        class="loginForm"
        label-width="70px"
      >
      <div class="title"><span class="">中装天如后台管理系统</span></div>
        <el-form-item label="用户名" prop="loginName">
          <el-input autocomplete="off" v-model="loginUser.loginName" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="loginPwd">
          <el-input
            autocomplete="off"
            type="password"
            v-model="loginUser.loginPwd"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="验证码" prop="valida">
          <div style="display:flex">
            <el-input
            autocomplete="off"
            width="122px"
            v-model="loginUser.captcha"
            placeholder="请输入验证码"
          ></el-input>
          <img :src="chapt" @click="getpic" alt="" class="chapt" />
          </div>
        </el-form-item> -->
        <div class="forget">
          <el-checkbox v-model="checked"  class="chenck-pass">记住密码</el-checkbox>
          <el-button  class="forget-text" type="text" @click="forgetBtn()">忘记密码?</el-button>
          <!-- <span class="forget-text" @click="forget(1)">忘记密码?</span> -->
        </div>
        <!-- <el-form-item> -->
          <el-button type="primary" id="keydown" class="submit_btn" @click="submitForm('loginForm')">登录</el-button>
        <!-- </el-form-item> -->
      </el-form>
    </div>
    <div class="beian">
      <p>v1.1.15/10</p>
      <p><a  target="_blank" style="color:#646464;text-decoration: none;" href="https://beian.miit.gov.cn/">蜀ICP备18028200号-1</a></p>
    </div>
  </div>
</template>

<script>
import request from "@/tools/request";
export default {
  name: "Register",
  data() {
    return {
      checked:true,
      chapt: "",
      loginUser: {
        loginName: "",
        loginPwd: "",
        captcha : ''
      },
      // keyDown:'',
      rules: {
        loginName: [
          { required: true, message: "用户名不能为空", trigger: "blur" }
        ],
        loginPwd: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 3, max: 30, message: "长度在5到30个字符之间", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
     
      this.$refs[formName].validate(async valid => {
        if (valid) {
           
          let loginUser = {
            username: this.loginUser.loginName,
            password: this.loginUser.loginPwd,
            // captcha: this.loginUser.captcha
          }
          window.localStorage.setItem('loginName', this.loginUser.loginName)
         
          // window.localStorage.setItem('captcha',this.loginUser.captcha)
          if(this.checked){
             window.localStorage.setItem('loginPwd', this.loginUser.loginPwd)
           }else{
              window.localStorage.removeItem('loginPwd')
           }
          
          let res = await this.$store.dispatch('base/login', loginUser)
          console.log('res',res)
          if(res.code =200) {
            this.$router.push("/home", () => {});
          }
          // this.$router.push("/");
        }
      });
    },
    isEmpty(value) {
      return (
        value === undefined ||
        value === null ||
        (typeof value === "object" && Object.keys(value).length === 0) ||
        (typeof value === "string" && value.trim().length === 0)
      );
    },
    forgetBtn(){
      console.log('1')
      this.$router.push("/forget", () => {});
      // this.$router.push({ path: "/forget" })
    },
    // async getpic() {
    //    const res = await request({
    //     url: "/captcha/pic.captcha",
    //     method: "GET",
    //   })
    //   this.chapt = res.img
    // },
    keyDown(e){
        //如果是回车则执行登录方法
      if(e.keyCode == 13){
        this.submitForm('loginForm');
      }
    },
    // disdroyLisen(){
    //   window.removeEventListener("keydown", this.keyDown);
    // },
  },
  created () {
    //  this.getpic()
     let loginPwd = window.localStorage.getItem('loginPwd')
     let loginName = window.localStorage.getItem('loginName')
     if(loginName && loginPwd){
       this.loginUser.loginName = loginName
       this.loginUser.loginPwd = loginPwd
     }
  },
  mounted(){
    //绑定事件
     window.addEventListener('keydown',this.keyDown);
  },
  destroyed(){
    window.removeEventListener('keydown',this.keyDown,false);
  }
}
</script>


<style scoped>
.form_container {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../../assets/bg.jpg) no-repeat center center;
  background-size: 100% 100%;
}
.el-form-item__content {
  margin: auto !important;
}
.bg__png {
  /* position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    transform:  scale(1);
    border:none; */
    /* border-radius: 6px; */
    /* display:table-cell */
}
.chapt {
  padding: 0 5px;
  width: 90px;
  height: 39px;
}
  @media screen and (min-width: 840px) {
    .manage_tip {
      width: 370px;
    }
  }
.manage_tip {
  height: 210px;
  position: absolute;
  top: 10%;
  left: 50%;
  padding: 25px;
  border-radius: 5px;
  text-align: center;
  margin-left: -177px;
  z-index: 2;
}
.form_container .manage_tip .title {
  font-family: "Microsoft YaHei";
  font-weight: bold;
  font-size: 24px;
  color: #0473e9;
  margin: 30px auto;
}

.loginForm {
  margin-top: 20px;
  background-color: white;
  padding: 18px;
  border-radius: 5px;
  /* box-shadow: 0px 5px 10px #cccccc; */
  /* background: linear-gradient(68deg,rgb(235 245 255 / 60%),hsl(0deg 0% 100% / 60%)); */
  /* background: linear-gradient(68deg,rgb(238 245 255 / 60%),hsl(0deg 0% 100% / 60%)); */
  /* box-shadow: 16px 16px 32px rgb(174 174 192 / 80%), -16px -16px 48px hsl(0deg 0% 100% / 62%); */
  /* box-shadow: 11px 2px 16px rgb(196 217 221 / 53%), -16px -16px 48px hsl(0deg 0% 100% / 52%); */
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(30px);
}
.submit_btn {
  width: 80%;


  
}
.chenck-pass {
  /*  margin-bottom: 10px;
    margin-left: 76%;*/
}
.beian {
  position: absolute;
  bottom: 20px;
  right: 0;
  font-size: 14px;
  display: flex;
  width: 50%;
  color: #878787;
  justify-content: space-between;
}
.forget{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 15px;
  margin-bottom: 22px;
}
.forget-text{
  color: #0473e9;
  cursor: pointer;
}
.el-checkbox__label{
  padding-left: 4px !important
}
.el-checkbox__input.is-checked+.el-checkbox__label{
  color: black !important;
}
</style>